import React from 'react'
import QueueAnim from 'rc-queue-anim'
import PubSub from 'pubsub-js/src/pubsub'
import Poker from './poker.js'
import {message} from 'antd'
import config from './../libs/config.js'

import '../styles/toprank.scss'

export default class toprank extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tabIndex: 0,
            datas: null,
        }
    }
    componentDidMount() {
        var t = this;
        PubSub.publish('updateMenu','back')
        PubSub.publish('updateTitle','牌谱胜率排行')

        t.setState({
            objAccount: JSON.parse(window.localStorage['account'])
        },function() {
            var hide = message.loading('加载中...',0)
            $.ajax({
                url: config.server_host + '/api/toprank',
                type: 'get',
                data: {
                    mobile: t.state.objAccount.user,
                    platform: t.state.objAccount.platform
                },
                success: function(data) {
                    if (data.code === 200) {
                        t.setState({
                            datas: data.data
                        })
                    }
                    hide()
                }
            })
        })
    }
    tabClick = (e) => {
        if(e.target.innerHTML === '赢的最多') {
            this.setState({
                tabIndex: 0
            })
        } else {
            this.setState({
                tabIndex: 1
            })
        }
    }
    render() {
        var t = this;
        return (
            <QueueAnim
            type={['bottom', 'top']}
            ease={['easeOutQuart', 'easeInOutQuart']}>
                <div className="ani-box pkl-toprank" key="a">
                    <div className="pkl-club-tab">
                        <div className="tab-head">
                            <div className={this.state.tabIndex === 0 ? 'tab-item active' : 'tab-item'} onClick={this.tabClick}>赢的最多</div>
                            <div className={this.state.tabIndex === 0 ? 'tab-item' : 'tab-item active'} onClick={this.tabClick}>输的最多</div>
                        </div>
                        <div className={this.state.tabIndex === 0 ? 'tab-content' : 'tab-content hidden'}>
                            <div className="table">
                                <div className="title">
                                    <span>手牌</span>
                                    <span>概率</span>
                                </div>
                                {
                                    t.state.datas !== null ? (function(){
                                        return t.state.datas.win.map(function(i){
                                        return (
                                            <div className="poker_group">
                                                <span className="pokers pspan">
                                                    <Poker value={i.Key.split(' ')[0]}></Poker>
                                                    <Poker value={i.Key.split(' ')[1]}></Poker>
                                                </span>
                                                <span className="pspan">
                                                    {(i.Val * 100).toFixed(2)} %
                                                </span>
                                            </div>
                                        )
                                    })
                                })() : 0
                                }
                            </div>
                        </div>
                        <div className={this.state.tabIndex === 0 ? 'tab-content hidden' : 'tab-content'}>
                            <div className="table">
                                <div className="title">
                                    <span>手牌</span>
                                    <span>概率</span>
                                </div>
                                {
                                    t.state.datas !== null ? (function(){
                                        return t.state.datas.lose.map(function(i){
                                        return (
                                            <div className="poker_group">
                                                <span className="pokers pspan">
                                                    <Poker value={i.card.split(' ')[0]}></Poker>
                                                    <Poker value={i.card.split(' ')[1]}></Poker>
                                                </span>
                                                <span className="pspan">
                                                    {(i.value * 100).toFixed(2)} %
                                                </span>
                                            </div>
                                        )
                                    })
                                })() : 0
                                }
                        </div>
                        </div>
                    </div>
                </div>
            </QueueAnim>
        )
    }
}
